import React from 'react';
import { observer } from 'mobx-react';
import { autorun, intercept } from 'mobx';
import { Button, Modal, message } from 'antd';

import Base from './base';
import UserTable from '../components/tables/user';
import Constants from '../constants/constants';

/**
 * 用户信息界面
 */
@observer(['user'])
class User extends Base {

  componentDidMount() {

    const { user } = this.props;
    this.removeDisposer = intercept(user.status, 'removing', this.handleRemoved);
    this.props.user.load();
  }

  componentWillUnmount() {
    this.removeDisposer();
  }

  render() {

    const { user } = this.props;

    return (
      <div>
        <UserTable
          loading={user.status.loading}
          items={user.items}
          onRemove={this.onRemove}
          onUpdate={this.onUpdate} />
      </div>
    );
  }

  handleRemoved = (removing) => {
    if (removing.newValue == false && 
        this.props.user.response.remove == Constants.Code.SUCCESS) {
      message.success('删除记录成功', 1);
    }
  }

  onRemove = (item) => {

    Modal.confirm({
      title: item.name + ' - 确认要删除这条记录吗？',
      content: '删除后将不能恢复',
      onOk: () => this.props.user.remove(item.id)
    })
  }

  onUpdate = (item) => {

  }
}

export default User;